<template>
	<!-- 商户！！！！！！！！！！ -->
  <div>
    <div v-if="!shoujiban">
      <div class="t_body_bg" :style="{backgroundImage: 'url('+bgimg+')'}">
        	<div class="t_login_box">
            <div class="t_logo_font" >
              <span v-if="!logoimg">logo</span>
              <img :src="logoimg" alt="">
            </div>
            <div class="t_welcome_font" v-if="logintype!=3" >{{ comname }}</div>
            <div class="t_welcome_font" v-else >找回密码</div>

      		<div class="t_login_con" v-if="logintype!=3">
      			<div class="t_type_box" v-if="check_code">
      				<div @click="choosetype(1)" class="t_type_btn" :class="{t_type_btn_lei:logintype==1}">登录</div>
      				<div @click="choosetype(2)" style="margin-left: 40px;" class="t_type_btn" :class="{t_type_btn_lei:logintype==2}">注册</div>
      			</div>

            <!-- 新登录 -->
            <div v-if="logintype==1">
              <div class="flexcc">
                <div style="margin: 0 20px 20px; font-weight: bold; cursor: pointer;" @click="loginm = 1" :style="{color:(loginm == 1?'rgb(0, 79, 253)':'')}">账号密码登录</div>
                <div style="margin: 0 20px 20px; font-weight: bold; cursor: pointer;" @click="loginm = 2" v-if="sms_open == 1" :style="{color:(loginm == 2?'rgb(0, 79, 253)':'')}" >验证码登录</div>
              </div>
              <!-- 账号密码 -->
              <div v-if="loginm == 1">
                <div class="t_input_box">
                  <img src="../../static/img/user.png" alt="">
                	<el-input class="t_del_com_input" v-model="form.username" placeholder="请输入手机号"></el-input>
                </div>
                <div class="t_input_box">
                	<img src="../../static/img/psd.png" alt="">
                	<el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>
                </div>
                <div @click="loginorreg" class="t_login_btn_box">
                		登录
                </div>
              </div>
              <!-- 手机号验证码 -->
              <div v-if="loginm == 2">
                <div class="t_input_box">
                  <img src="../../static/img/user.png" alt="">
                	<el-input class="t_del_com_input" v-model="form.phonenum" placeholder="请输入手机号"></el-input>
                </div>
                <div class="t_input_box">
                	<el-input class="t_del_com_input" v-model="form.code" maxlength="6" style="margin-left: 36px;width: 148px;" placeholder="请输入验证码"></el-input>
                	<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
                </div>
                <div @click="loginorreg" class="t_login_btn_box">
                		登录
                </div>
              </div>


            </div>
            <!-- 新注册 -->
            <div v-if="logintype==2">
            	<div class="t_input_box">
                <img src="../../static/img/user.png" alt="">
            		<el-input class="t_del_com_input" v-model="form.phonenum" placeholder="请输入手机号"></el-input>
            	</div>
				<div class="t_input_box">
					<img src="../../static/img/psd.png" alt="">
					<el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>
				</div>
				<div class="t_input_box" v-if="region_collect == 1">
					<img src="../../static/img/weizhi.png" alt="">
					<el-cascader style="width: 100%" @change="changeaddress" v-model="localcitycode" :options="options" class="borderless" placeholder="请选择省/市/区">
					</el-cascader>
				</div>
            	<div class="t_input_box" v-if="sms_open == 1">
            		<el-input class="t_del_com_input" v-model="form.code" maxlength="6" style="margin-left: 36px;width: 148px;" placeholder="请输入验证码"></el-input>
            		<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
            	</div>
            	<div class="t_input_box" v-if="distributor != 0">

            		<el-input class="t_del_com_input" v-model="form.yqcode" style="margin-left: 36px;" placeholder="请输入邀请码"></el-input>
            	</div>
            	<div @click="loginorreg" class="t_login_btn_box">
            		注册
            	</div>
            </div>


      			<!-- 登录展示 -->
<!--      			<div class="t_input_box">
      				<img src="../../static/img/user.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.username" placeholder="账号名称/手机号"></el-input>
      			</div>
      			<div class="t_input_box">
      				<img src="../../static/img/psd.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>
      			</div>
      			<div @click="loginorreg" v-if="logintype==1" class="t_login_btn_box">
      					登录
      			</div> -->

      			<!-- 注册展示 -->
<!--      			<div v-if="logintype==2">
      				<div class="t_input_box">
      					<el-input class="t_del_com_input" v-model="form.phonenum" style="margin-left: 36px;" placeholder="请输入手机号"></el-input>
      				</div>
              <div class="t_input_box">
              	<img src="../../static/img/psd.png" alt="">
              	<el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>
              </div>
      				<div class="t_input_box">
      					<el-input class="t_del_com_input" v-model="form.code" style="margin-left: 36px;width: 148px;" placeholder="请输入验证码"></el-input>
      					<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
      				</div>
      				<div class="t_input_box" v-if="distributor != 0">

      					<el-input class="t_del_com_input" v-model="form.yqcode" style="margin-left: 36px;" placeholder="请输入邀请码"></el-input>
      				</div>
      				<div @click="loginorreg" class="t_login_btn_box">
      					注册
      				</div> -->
      			<!-- </div> -->

      			<div @click="choosetype(3)" class="t_tips_btn">
      				忘记密码
      			</div>
      		</div>
      		<!-- 找回密码 -->
      		<div class="t_login_con" v-else>
      			<!-- <div class="t_input_box">
      				<img src="../../static/img/user.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.username" placeholder="找回密码的账号名称"></el-input>
      			</div> -->
      			<div class="t_input_box">
              <img src="../../static/img/user.png" alt="">
      				<el-input class="t_del_com_input" :readonly="readonly" @focus="readonly=false" v-model="form.phonenum" placeholder="请输入手机号"></el-input>
      			</div>
      			<div class="t_input_box">
      				<el-input class="t_del_com_input" v-model="form.code" maxlength="6" style="margin-left: 36px;width: 148px;" placeholder="请输入验证码"></el-input>
      				<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
      			</div>
      			<div class="t_input_box">
      				<img src="../../static/img/psd.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.password"  placeholder="请输入新密码" show-password></el-input>
      			</div>
      			<div class="t_input_box">
      				<img src="../../static/img/psd.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.passwordagin" placeholder="再次输入密码" show-password></el-input>
      			</div>
      			<div @click="loginorreg" class="t_login_btn_box">
      				确定
      			</div>
      			<div @click="choosetype(1)" class="t_tips_btn">
      				返回登录
      			</div>
      		</div>
      	</div>
      </div>
      <div style="position: fixed; left: 0; width:100%; bottom: 20px; font-size: 12px; z-index: 99;" class="flexcc" v-if="icp">
        <a target="_blank" href="https://beian.miit.gov.cn/" class="flexc">
          <img src="../../static/img/beian.png" style="margin-right: 10px;">{{icp}}
        </a>
      </div>
    </div>

    <mlogin v-if="shoujiban"></mlogin>

  </div>

</template>

<script>
  import {bufahuodiqu} from '../assets/bufahuodiqu.js'
  import mlogin from './mlogin/login.vue'
  import {
		CodeToText,
		TextToCode
	} from "element-china-area-data";

	export default {
		name: 'login',
        components:{
		mlogin,
		},
		data() {
			return {
				checked: true,//是否记住账户
				logintype:1,
        		loginm:1,
				codemsg:'获取验证码',
				form:{
					username:'',//账号名称
					password:'',//密码
					phonenum:'',//手机号
					code:'',//验证码
					yqcode:'',//邀请码
					passwordagin:'',//再次输入密码
					province :'',//省
					city:'',//市
					district:''//区
				},
				bgimg:require('@/../static/img/loginbg.png'),
				// bgimg:'https://img.jbzj.com/file_images/article/202205/2022053011053840.png',
				logoimg:'',
				comname:'欢迎使用',
				readonly:true,
        		xinxi:"",
				check_code:'',
				shoujiban:false,
				distributor:0,
				icp:"",
        		selectedOptions: [],
				options: bufahuodiqu,
				localcitycode:'',
        region_collect:0,
        sms_open:0
			}
		},
		created() {
		  axios.get('/api/logo').then((response)=>{
			if (response.data.msg.code == 0) {
        this.sms_open = response.data.data.sms_open
			  this.bgimg = response.data.data.login_background
			  this.comname = response.data.data.shop_name
			  this.logoimg = response.data.data.system_logo
        this.icp = response.data.data.icp
        this.region_collect = response.data.data.region_collect

			  this.distributor = response.data.data.distributor
			  console.log(this.distributor)
			  document.title = response.data.data.shop_name
			  localStorage.setItem('shop_name',response.data.data.shop_name)
			  localStorage.setItem('system_logo',response.data.data.system_logo)
			  localStorage.setItem('left_logo',response.data.data.left_logo)
			  localStorage.setItem('icp',response.data.data.icp)

			  var dz_url = window.location.href;//获取地址
			  var check_code2 = dz_url.split('?')[1];//获取?之后的参数字符串
			  if(check_code2==undefined){
          this.check_code = ''
			  }else{
          //演示网站用
          if(!this.$route.query.username){
            this.logintype = 2
            this.check_code = decodeURIComponent(check_code2.split('&')[0])
            console.log(this.check_code)
            //用户端可能有这个值  有的话就需要邀请码才能注册
            if(check_code2.split('&')[1]){
              this.distributor = 1
            }else{

            }
          }else{
            if(this.$route.query.username){
              this.form.username = this.$route.query.username
            }
            if(this.$route.query.password){
              this.form.password = this.$route.query.password
            }
          }

			  }
			} else {
				this.$message.error(response.data.msg.info);
			}


		  })


		},
		mounted() {
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
        this.getCookie()
      }else{

      }

      if(localStorage.getItem('sxqb')){
        this.form.username = localStorage.getItem('sxqb')
        this.form.password = localStorage.getItem('sxqb2')
      }
		},
		methods: {
			choosetype(i){
        if( i == 3){
          if(this.sms_open == 1){
            this.logintype = i
            //重置数据
            this.codemsg = '获取验证码'
            this.form.username = ''
            this.form.password = ''
            this.form.phonenum = ''
            this.form.code = ''
            this.form.yqcode = ''
            this.form.passwordagin = ''
          }else{
            this.$message({
            	message: '请联系管理员重置密码',
            	type: 'error'
            });
          }
        }else{
          this.logintype = i
          //重置数据
          this.codemsg = '获取验证码'
          this.form.username = ''
          this.form.password = ''
          this.form.phonenum = ''
          this.form.code = ''
          this.form.yqcode = ''
          this.form.passwordagin = ''
        }

			},
			//注册，登录，找回
			loginorreg(){
				//1登录，2注册，3找回

				if(this.logintype==1){

          if(this.loginm == 1){
            // //账号密码
            // if(this.form.username==''){
            // 	this.$message.error('请输入手机号');
            // 	return
            // }
            // if(this.form.password==''){
            // 	this.$message.error('请输入密码');
            // 	return
            // }
            var obg={
            	name:this.form.username,
            	password:this.form.password,
            }
          }

          if(this.loginm == 2){
            // //手机号验证码
            // if(this.form.phonenum==''){
            // 	this.$message.error('请输入手机号');
            // 	return
            // }
            // if(this.form.code==''){
            // 	this.$message.error('请输入验证码');
            // 	return
            // }
            var obg={
            	name:this.form.phonenum,
            	sms_code:this.form.code,
            }
          }


					axios.post('/api/login',obg).then((response)=>{
						if (response.data.msg.code == 0) {

              localStorage.setItem('sxqb',this.form.username)
              localStorage.setItem('sxqb2',this.form.password)


							this.$message({
								message: '登录成功',
								type: 'success'
							});
                //1 管理员 0 用户
                if(response.data.data.is_owner==1){
                  //临时写在这里
                  axios.get('/own/auth/user').then((response2)=>{
                    if (response2.data.msg.code == 0) {



                      localStorage.setItem('user',JSON.stringify(response2.data.data))
                      this.$nextTick(()=>{
                        if(this.shoujiban){
                          window.open(window.location.origin+'/hou/shangpinguanli/gongyingshangshangpin', "_self")
                        }else{
                          window.open(window.location.origin+'/hou', "_self")
                        }
                      })
                    } else {
                      this.$message.error(response2.data.msg.info);
                    }
                  })
                }

                if(response.data.data.is_owner==0){
                  axios.get('/agent/auth/user').then((response2)=>{
                    if (response2.data.msg.code == 0) {
                      localStorage.setItem('user',JSON.stringify(response2.data.data))
                      this.$nextTick(()=>{
                        if(this.shoujiban){
                          window.open(window.location.origin+'/web/shangpinguanli/zaishoushangpin', "_self")
                        }else{
                          window.open(window.location.origin+'/web', "_self")
                        }
                      })
                    } else {
                      this.$message.error(response2.data.msg.info);
                    }
                  })
                }

						} else {
							this.$message.error(response.data.msg.info);
						}
					})


				}
				if(this.logintype==2){
          this.form.username = this.form.phonenum
					//注册
					if(this.form.username==''){
						this.$message.error('请输入用户名');
						return
					}
					if(this.form.password==''){
						this.$message.error('请输入密码');
						return
					}
					// if(this.form.phonenum==''){
					// 	this.$message.error('请输入手机号');
					// 	return
					// }
					// if(this.form.code==''){
					// 	this.$message.error('请输入验证码');
					// 	return
					// }



					var obg={
						name:this.form.username,
						password:this.form.password,
						mobile:this.form.phonenum,
						sms_code:this.form.code,
						invite_code:this.form.yqcode,
						check_code:this.check_code,
						province:this.form.province,
						city:this.form.city,
						district:this.form.district
					}

					axios.post('/agent/user/register',obg).then((response)=>{
						if (response.data.msg.code == 0) {
							this.$message({
								message: '注册成功',
								type: 'success'
							});
							this.logintype = 1
						} else {

							this.$message.error(response.data.msg.info);
						}
					})


				}
				if(this.logintype==3){

					if(this.form.password==''){
						this.$message.error('请输入密码');
						return
					}
					// if(this.form.phonenum==''){
					// 	this.$message.error('请输入手机号');
					// 	return
					// }
					// if(this.form.code==''){
					// 	this.$message.error('请输入验证码');
					// 	return
					// }
					if(this.form.password!=this.form.passwordagin){
						this.$message.error('两次输入密码不同');
						return
					}
					//找回
					var obg={
						name:this.form.username,
						mobile:this.form.phonenum,
						sms_code:this.form.code,
						passwd:this.form.password,
						passwd_agin:this.form.passwordagin,
					}

					axios.post('/api/password/reset',obg).then((response)=>{
						if (response.data.msg.code == 0) {
							this.$message({
								message: '重置成功',
								type: 'success'
							});
							this.logintype = 1
						} else {
							this.$message.error(response.data.msg.info);
						}
					})



				}
			},
			//获取验证码
			getcode(){

				if(this.form.phonenum.length!=11){
					this.$message.error('请输入正确手机号');
					return
				}

				if(this.codemsg=='获取验证码'){
					this.codemsg = 60
					var time = setInterval(()=>{
						if(this.codemsg>0){
							this.codemsg--
						}else{
							this.codemsg = '获取验证码'
							clearInterval(time)
						}
					},1000)

          if(this.logintype==1){
            //手机号登录
            var obg = {
            	mobile:this.form.phonenum,
            }
            axios.post('/api/user/login/code/send',obg).then((response)=>{
            	if (response.data.msg.code == 0) {
            		this.$message({
            			message: '发送成功',
            			type: 'success'
            		});
            	} else {
            		this.$message.error(response.data.msg.info);
            	}
            })
          }

					if(this.logintype==2){
						//注册
						var obg = {
							mobile:this.form.phonenum,
							type:''
						}

						axios.post('/api/user/register/code/send',obg).then((response)=>{
							if (response.data.msg.code == 0) {
								this.$message({
									message: '发送成功',
									type: 'success'
								});
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
					}

					if(this.logintype==3){
						// if(this.form.username==''){
						// 	this.$message.error('请输入用户名');
						// 	return
						// }
						//重置
						var obg = {
							mobile:this.form.phonenum,
							name:this.form.username
						}
						axios.post('/api/reset/code/send',obg).then((response)=>{
							if (response.data.msg.code == 0) {
								this.$message({
									message: '发送成功',
									type: 'success'
								});
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
					}
				}

			},
			// 记住用户
			rememberUser() {
				const that = this;
				//判断复选框是否被勾选 勾选则调用配置cookie方法
				if (that.checked == true) {
					//传入账号名，密码，和保存天数三个参数
					that.setCookie(that.form.username, that.form.password, 7);
					console.log('that.form.username, that.form.password',that.form.username, that.form.password)
				} else {
					//清空Cookie
					that.clearCookie();
				}
			},

			//清除cookie
			clearCookie: function() {
				this.setCookie("", "", -1); //修改两个值都为空，天数为-1天就好了
			},
			//设置cookie
			setCookie(c_name, c_pwd, exdays) {
				let exdate = new Date(); //获取时间
				exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
				//字符串拼接cookie
				window.document.cookie =
					"account" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
				window.document.cookie =
					"password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
					console.log('window.document.cookie',window.document.cookie)
			},
			// 读取cookie
			getCookie: function() {
				let that = this;
				if (document.cookie.length > 0) {
					let arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
					for (let i = 0; i < arr.length; i++) {
						let arr2 = arr[i].split("="); //再次切割
						//判断查找相对应的值
						if (arr2[0] == "account") {
							that.form.username = arr2[1]; //保存到保存数据的地方
						} else if (arr2[0] == "password") {
							that.form.password = arr2[1];
						}
					}
				}
			},
			//选择地址
			changeaddress(val){
				console.log('val',val)
				// this.province_z = ''
				// this.city_z = ''
				// this.district_z = ''
				this.form.province = this.changeCodeToText(val[0])
				this.form.city = this.changeCodeToText(val[1])
				this.form.district = this.changeCodeToText(val[2])
				console.log('333',this.form.province,this.form.city,this.form.district)
			},
			//地区编码转文字
			changeCodeToText(code){
				return CodeToText[code]
			},
		}
	}
</script>

<style scoped>
	.t_body_bg{
		width:100vw;
		height:100vh;
		/* background-image: url('/static/img/loginbg.png'); */
		/* background-position: center center; */
    background-size: cover;
    background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: flex-end;

	}
	.t_login_box{
		width: 524px;
		/* height: 776px; */
		padding: 30px;
		border-radius: 45px;
		background-color: #f6f8fb;
		text-align: center;
		margin-right: 200px;
	}
	.t_login_con{
		width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.t_type_box{
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}
	.t_type_btn{
		width: 100px;
		height: 50px;
		background-color: #e3e8f1;
		border-radius: 25px;
		text-align: center;
		line-height:50px ;
		color: #AFB3BC;
		border: 1px solid #E3E8F1;
		cursor: pointer;
	}
	.t_type_btn_lei{
		background-color: #E6EFFF;
		color: #005AFF;
		border: 1px solid #005AFF;
	}
	.t_input_box{
		border: 1px solid #e3e8f1;
		border-radius: 25px;
		display: flex;
		height: 46px;
		align-items: center;
		background-color: white;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.t_input_box img{
		margin-left: 22px;
		margin-right: 0px;
	}
	/deep/.t_input_box .el-input__inner{
		border: none;
	}
	.t_get_code{
		width: 112px;
		height: 40px;
		background: #e6efff;
		border: 1px solid #005aff;
		border-radius: 25px;
		text-align: center;
		line-height: 40px;
		color: #005AFF;
		font-size: 14px;
		cursor: pointer;

	}
	.t_login_btn_box{
		background-color:#005aff;
		color: white;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		border-radius: 25px;
		margin-top: 60px;
		cursor: pointer;
	}
	.t_tips_btn{
		color: #afb3bc;
		font-size: 14px;
		text-align: center;
		margin-top: 23px;
		cursor: pointer;
	}
	.t_logo_font{
		margin-top: 58px;
		color: #005aff;
		font-size: 29px;
	}
	.t_logo_font img{
		width: 100px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.t_welcome_font{
		margin-top: 28px;
		margin-bottom: 28px;
		font-weight: bold;
		font-size: 28px;
	}
	/deep/.t_del_com_input .el-input__inner{
		border: none !important;
		background-color: white !important;
	}


</style>
<style  lang="less">
.el-cascader .el-input__inner {
    border: 0 !important;
	background-color: white !important;
  }
</style>
